import * as React from "react"

import { useMediaQuery } from "~/hooks/use-media-query"
import { ny } from "~/lib/utils"
import { Button } from "~/registry/miami/ui/button"
import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
} from "~/registry/miami/ui/dialog"
import {
   Drawer,
   DrawerClose,
   DrawerContent,
   DrawerDescription,
   DrawerFooter,
   DrawerHeader,
   DrawerTitle,
   DrawerTrigger,
} from "~/registry/miami/ui/drawer"
import { Input } from "~/registry/miami/ui/input"
import { Label } from "~/registry/miami/ui/label"

export default function DrawerDialogDemo() {
   const [open, setOpen] = React.useState(false)
   const isDesktop = useMediaQuery("(min-width: 768px)")

   if (isDesktop) {
      return (
         <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild>
               <Button variant="outline">Edit Profile</Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-[425px]">
               <DialogHeader>
                  <DialogTitle>Edit profile</DialogTitle>
                  <DialogDescription>
                     Make changes to your profile here. Click save when you're
                     done.
                  </DialogDescription>
               </DialogHeader>
               <ProfileForm />
            </DialogContent>
         </Dialog>
      )
   }

   return (
      <Drawer open={open} onOpenChange={setOpen}>
         <DrawerTrigger asChild>
            <Button variant="outline">Edit Profile</Button>
         </DrawerTrigger>
         <DrawerContent>
            <DrawerHeader className="text-left">
               <DrawerTitle>Edit profile</DrawerTitle>
               <DrawerDescription>
                  Make changes to your profile here. Click save when you're
                  done.
               </DrawerDescription>
            </DrawerHeader>
            <ProfileForm className="px-4" />
            <DrawerFooter className="pt-2">
               <DrawerClose asChild>
                  <Button variant="outline">Cancel</Button>
               </DrawerClose>
            </DrawerFooter>
         </DrawerContent>
      </Drawer>
   )
}

function ProfileForm({ className }: React.ComponentProps<"form">) {
   return (
      <form className={ny("grid items-start gap-4", className)}>
         <div className="grid gap-2">
            <Label htmlFor="email">Email</Label>
            <Input type="email" id="email" defaultValue="nyxb@example.com" />
         </div>
         <div className="grid gap-2">
            <Label htmlFor="username">Username</Label>
            <Input id="username" defaultValue="~nyxb" />
         </div>
         <Button type="submit">Save changes</Button>
      </form>
   )
}
